<template>
  <header-control />
  <section class="main">
    <div class="main-menu">
      <el-menu
        active-text-color="#157DFA"
        background-color="#fff"
        class="el-menu-vertical"
        text-color="#494949"
        :default-active="currentPath.path"
        router
        unique-opened
      >
        <el-sub-menu v-for="menu in menuList" :key="menu.path" :index="menu.path">
          <template #title>
            <el-icon><component :is="menu.icon" /></el-icon>
            <span>{{ menu.name }}</span>
          </template>
          <el-menu-item
            v-for="child in menu.children"
            :key="child.path"
            :index="child.path"
          >
            {{ child.name }}
            <div class="dot" v-if="child.num" />
          </el-menu-item>
        </el-sub-menu>
      </el-menu>
    </div>
    <div class="main-con">
      <section class="con">
        <p class="con-title">
          <el-icon><component :is="currentPath.icon" /></el-icon>
          <span>{{ currentPath.name }}</span>
        </p>
        <div class="con-main">
          <div class="con-con">
            <router-view />
          </div>
        </div>
      </section>
    </div>
  </section>
</template>
<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import HeaderControl from "@/components/main-header/c-cpns/header-control.vue";
import useSystemStore from "@/store/main/system/system";
const systemStore = useSystemStore();

import { useRoute } from "vue-router";
const route = useRoute();

const currentPath = ref({
  icon: "",
  name: "",
  path: "",
}); // 选中路由
// 菜单目录
const menuList = ref<any>([
  {
    icon: "Document",
    name: "财务 售后",
    path: "1",
    children: [
      { icon: "Document", name: "首页", path: "/control/financialAfterSale/index" },
      {
        icon: "Document",
        name: "财务流水",
        path: "/control/financialAfterSale/financialStatement",
      },
      { icon: "Document", name: "发票管理", path: "/control/financialAfterSale/invoice" },
      {
        icon: "Document",
        name: "合同管理",
        path: "/control/financialAfterSale/contract",
      },
    ],
  },
  {
    icon: "TrendCharts",
    name: "项目管理",
    path: "2",
    children: [
      { icon: "TrendCharts", name: "云服务器", path: "/control/myServer/cloudService" },
      { icon: "TrendCharts", name: "云市场", path: "/control/myServer/cloudMarketplace" },
      { icon: "TrendCharts", name: "政务云", path: "/control/myServer/cloudGovernment" },
    ],
  },
  {
    icon: "ShoppingCartFull",
    name: "我的订单",
    path: "3",
    children: [
      {
        icon: "ShoppingCartFull",
        name: "我的购物车",
        path: "/control/order/myShoppingCart",
      },
      { icon: "ShoppingCartFull", name: "我的订单", path: "/control/order/MyOrder" },
    ],
  },
  {
    icon: "ChatDotSquare",
    name: "我的消息",
    path: "4",
    children: [
      {
        icon: "ChatDotSquare",
        name: "查看工单",
        path: "/control/financialAfterSale/workOrder",
        num: 0,
      },
      {
        icon: "ChatDotSquare",
        name: "我的消息",
        path: "/control/message/myMessage",
        num: 0,
      },
    ],
  },
  {
    icon: "PriceTag",
    name: "充值",
    path: "5",
    children: [{ icon: "PriceTag", name: "充值", path: "/control/recharge/myRecharge" }],
  },
]);

onMounted(() => {
  currentPath.value = findParent(route.path, menuList.value);
  systemStore.orderUnread();
  systemStore.messageUnread();
  menuList.value[3].children[0].num = systemStore.unreadOrder;
  menuList.value[3].children[1].num = systemStore.unreadMessage;
});

watch(route, (val) => {
  currentPath.value = findParent(val.path, menuList.value);
  systemStore.orderUnread();
  systemStore.messageUnread();
});

watch(systemStore, (val) => {
  menuList.value[3].children[0].num = val.unreadOrder;
  menuList.value[3].children[1].num = val.unreadMessage;
});

// 获取父级信息
const findParent = (path: string, data: any) => {
  for (let i = 0; i < data.length; i++) {
    if (data[i].path == path) {
      return data[i];
    } else if (data[i].children) {
      let child = findParent(path, data[i].children);
      if (child) {
        return child;
      }
    }
  }
  return "";
};
</script>
<style lang="less" scoped>
.main {
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
  .main-menu {
    width: 208px;
    height: 100%;
    overflow-y: auto;
  }
  .main-con {
    flex: 1;
    .con {
      width: 100%;
      height: 100%;
      position: relative;
      .con-title {
        width: 100%;
        height: 30px;
        line-height: 30px;
        color: #4098ff;
        background-color: #f5f7fa;
        position: absolute;
        padding-left: 20px;
        top: 0;
        left: -0.9px;
        i {
          margin-right: 6px;
        }
      }
      .con-main {
        width: 100%;
        height: 100%;
        background: rgba(144, 144, 144, 0.1);
        padding: 54px 24px 24px 24px;
        .con-con {
          width: 100%;
          height: 100%;
          border-radius: 20px;
          padding: 20px;
          background: #ffffff;
          overflow-y: auto;
        }
      }
    }
  }
}
.el-menu-vertical {
  font-size: 15px;
  font-weight: 500;
  height: 100vh;
  overflow-y: auto;
  .el-menu-item:hover {
    color: #157dfa;
    background-color: #f6faff;
  }
}
:deep(.el-sub-menu__title:hover) {
  color: #157dfa !important;
  background-color: #f6faff !important;
}
.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ff3939;
  margin-left: 10px;
}
</style>
